<template>
    <div class="h-screen w-full flex flex-col overflow-y-auto">
        <Header :hiddenFold="true"></Header>
        <!-- <List :editable="false" :options="userList" titleProperty="name"></List> -->
        <div class="w-full max-w-screen-2xl mx-auto my-8">
            <ProTable :columns="columns" :rows="userList">
            </ProTable>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Header from '@/components/navigation/Header.vue';
import List from '@/components/display/List.vue';
import ProTable from '@/components/display/ProTable.vue';
import { getUserList } from '@/api/user.ts'
const userList = ref([]);
const columns = ref([
    {
        label: '名称',
        field: 'name',
    },
    {
        label: '邮箱',
        field: 'email'
    },
    {
        label: '电话',
        field: 'mobile'
    }
]);
onMounted(() => {
    getUserList().then(data => {
        userList.value = data || [];
    })
})
</script>


<style lang='scss' scoped></style>